<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax和后台交互_json对象</title>
    <style type="text/css">
        select {
            width:160px;
            font-size:11pt;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
       $(function () {
            $("#bookType").on("change",function() {
                var id = $(this).val();
                $.ajax({
                    type :"post",//请求的方式，也有get请求
                    url: "/BookAjaxServlet",//请求地址
                    date :id,//data是传给后台的字段，后台需要哪些就传入哪些
                    dateType :"json" ,//json格式，后台返回的数据为json格式的
                    success:function (result) {
                        //返回的result为json格式的数据
                        var dataObject = $.parseJSON(result),
                            bookItem = "";
                        console.log(result);
                        var bookTb = document.getElementById("book");
                        $.each(dataObject,function (index,intem) {
                            bookItem='<tr>\n' +
                                '            <td>'+intem.id+'</td>\n' +
                                '            <td>'+intem.name+'</td>\n' +
                                '            <td>'+intem.author+'</td>\n' +
                                '            <td>'+intem.price+'</td>\n' +
                                '          </tr>';
                            $("#book").append(bookItem);
                        })

                    }
                })

           })
       })
    </script>
</head>
<body>
<select name="bookType" id="bookType">
    <option value="1" selected="selected">编程类</option>
    <option value="2">小说类</option>
    <option value="3">哲学类</option>
</select>

<table border="1" style="border-collapse:collapse;width:600px;margin-top:20px;">
    <thread>
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
        </tr>
    </thread>

    <tbody id="book">
    </tbody>

</table>

</body>
</html>